<template>
  <template v-for="(item, inx) in themeMode" :key="inx">
    <a-tooltip
      :title="$t('setting.menuTheme.' + item[0])"
      :overlayStyle="{ zIndex: 2001 }"
    >
      <div class="img_check_box" @click="handleToggle(item[1], inx)">
        <img :src="images[inx]" />
        <CheckOutlined
          class="check_item primary_color"
          v-if="sChecked === inx"
        />
      </div>
    </a-tooltip>
  </template>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance, computed } from "vue";
import { CheckOutlined } from "@ant-design/icons-vue";
import { useStore, mapGetters } from "vuex";
export default defineComponent({
  name: "ImageCheckbox",
  props: {
    themeMode: {
      type: Object,
      required: true,
    },
  },
  components: { CheckOutlined },
  setup(props) {
    const proxy = getCurrentInstance()?.proxy;
    const { commit, getters } = useStore();
    const selectedMode = getters.setting.selectedMode;
    const sChecked = ref(0);

    const themeMode = Object.entries(props.themeMode);

    const images = [
      require("@/assets/setting/dark.svg"),
      require("@/assets/setting/light.svg"),
      require("@/assets/setting/night.svg"),
    ];

    if (proxy?.$utils.$isTrue(selectedMode)) {
      sChecked.value = Number(selectedMode);
    }

    const handleToggle = (item: string, inx: number): void => {
      sChecked.value = inx;
      commit("SET_MENUMODE", String(inx));
      proxy?.$eventBus.$emit("setMenuTheme", inx);
    };

    return {
      sChecked,
      handleToggle,
      images,
      themeMode,
    };
  },
});
</script>

<style lang="scss" scoped>
.img_check_box {
  margin-right: 16px;
  position: relative;
  border-radius: 4px;
  cursor: pointer;
  .check_item {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    padding-top: 18px;
    padding-left: 18px;
    height: 100%;
    font-size: 18px;
  }
}
</style>